<template>
  <el-row>
    <el-col class="title">修改密码</el-col>
    <el-col class="infoCenter">
      <el-tabs type="border-card">
        <el-tab-pane label="修改密码">
          <el-form>
            <el-form-item label="用户名：" label-width="15%">
              <el-input v-model="userInfo.username" placeholder="请输入用户名" style="width: 500px;" disabled></el-input>
            </el-form-item>
            <el-form-item label="原始密码：" label-width="15%">
              <el-input type="password" v-model="userByPassword.oldPassword" placeholder="请输入原始密码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" label-width="15%">
              <el-input type="password" v-model="userByPassword.newPassword" placeholder="请重新输入新密码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="确定密码：" label-width="15%">
              <el-input type="password" v-model="userByPassword.confirmPassword" placeholder="请重新输入一次密码" style="width: 500px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="infoTitle">
            <el-popconfirm
                title="你确定要修改密码吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="updatePwd"
            >

              <template #reference>
                <el-button type="primary">确定</el-button>
              </template>
            </el-popconfirm>

          </div>
        </el-tab-pane>
        <el-tab-pane label="修改支付密码">
          <el-form>
            <el-form-item label="用户名：" label-width="15%">
              <el-input v-model="userInfo.username" placeholder="请输入用户名" style="width: 500px;" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户密码：" label-width="15%">
              <el-input type="password" v-model="userByPayPassword.oldPassword" placeholder="请输入原始密码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="原支付密码：" label-width="15%">
              <el-input type="password" v-model="userByPayPassword.oldPayPwd" placeholder="请重新输入原支付密码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="新支付密码：" label-width="15%">
              <el-input type="password" v-model="userByPayPassword.newPayPwd" placeholder="请重新输入新支付密码" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item label="确定支付密码：" label-width="15%">
              <el-input type="password" v-model="userByPayPassword.confirmPayPwd" placeholder="请重新输入一次密码" style="width: 500px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="infoTitle">
            <el-popconfirm
                title="你确定要修改密码吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="updatePayPwd"
            >

              <template #reference>
                <el-button type="primary">确定</el-button>
              </template>
            </el-popconfirm>

          </div>
        </el-tab-pane>

      </el-tabs>

    </el-col>
  </el-row>

</template>

<script setup>
import {useUserStore} from "@/stores/user.js";
import {useTokenStore} from "@/stores/tokenStore.js";
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const userStore = useUserStore();
const tokenStore = useTokenStore();
//存储用户信息的变量
const userInfo = ref({})
const userByPassword = ref({
  id: null,
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

const userByPayPassword = ref({
  id: null,
  oldPassword: '',
  oldPayPwd: '',
  newPayPwd: '',
  confirmPayPwd: '',
})
const getUserInfo = ()=> {
  userInfo.value = userStore.userInfo;
  userByPassword.value.id = userStore.userInfo.id;
  userByPayPassword.value.id = userStore.userInfo.id;
}
//修改用户信息
const updatePwd = () => {
  userApi.chgPwd(userByPassword.value)
      .then(resp => {
        if (resp.code == 10000) {
          //删除用户登录信息
          userStore.$reset();
          //删除token
          tokenStore.$reset();
          ElMessage.success({
            message: resp.msg,
            onClose: ()=> {
              //跳转到登录界面
              router.push('/user/login')
            }
          })
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//修改支付密码
const updatePayPwd = () => {
  userApi.chgPayPwd(userByPayPassword.value)
      .then(resp => {
        if (resp.code == 10000) {
          //删除用户登录信息
          userStore.updateUser(resp.msg)
          ElMessage.success( resp.msg)
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
getUserInfo();
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.infoCenter {
  background-color: #ffffff;
  padding: 20px;
}
.infoTitle {
  text-align: right;
}
</style>